<template>
  <wakin-list-temp
    ref="temp"
    empty-mode="data"
    page-num-key="page"
    page-size-key="limit"
    :page-start-num="1"
    :res-data-key="['data', 'list']"
    :res-total-key="['data', 'count']"
    :res-code-key="['code']"
    :status-code="errorCode.success"
    :empty-icon="$data.icon"
    :bottom-load-text="$data.loadText"
    :show-bottom-load-text="false"
    :custom-empty="false"
    :show-load-toast="$data.showLoadToast"
    @loadData="getDatas"
    @loadStatus="loadStatus"
  >
    <!--插槽:数据列表-->
    <template #render>
      <view class="list-box">
        <!--数据卡片-->
        <view
          class="list-item"
          v-for="(item, index) of $data.list"
          :key="index"
          @longtap="$data.delShow = true"
          @tap.stop="details(item)"
        >
          <view
            v-if="$data.delShow"
            class="check"
            @tap.stop="item._delCheck = !item._delCheck"
          >
            <view class="check_box">
              <view v-if="item._delCheck" class="check_box--check"></view>
            </view>
          </view>
          <view class="address_card card">
            <view class="content">
              <view class="content_name">
                <text>{{ item.name }}</text>
                <text class="margin-left-sm">{{ item.phone }}</text>
                <text
                  v-if="item.isDefault == 1"
                  class="text-main-color margin-left-xs"
                >
                  [默认]
                </text>
              </view>
              <view class="content_address">
                {{ item.address }}
              </view>
            </view>
            <view class="icon" @tap.stop="edit(item)">
              <image :src="ImgIconEditGray" />
            </view>
          </view>
        </view>
      </view>
    </template>
    <!--插槽:自定义空提示-->
    <template #empty>
      <!-- <view class="empty" slot="empty"> -->
      <image :src="$data.icon"></image>
      <!-- </view> -->
    </template>
  </wakin-list-temp>
</template>

<script setup>
import { getCurrentInstance, reactive, ref, toRef, toRefs, watch } from "vue";
import { getAddressList as requestApi } from "@/api/Interface/address";
import BasicConfig from "../../../../utils/config";
import errorCode from "../../../../utils/http/errorCode";
import { ImgIconEditGray } from "../../../../utils/iconMap";
import { jumpPage } from "../../../../utils/route/route";
const Instance = getCurrentInstance();
const $vm = Instance?.appContext.config.globalProperties;
const $emit = defineEmits(["total", "clickItem", "checkShow", "checkItem"]);
const temp = ref();
const loadShow = ref(false);
const $data = reactive({
  list: [],
  loadText: {
    loadmore: "轻轻上拉",
    loading: "努力加载中",
    nomore: "没有数据了",
  },
  showLoadToast: false, // 是否显示加载中toast
  listLoad: true, // 组件数据加载状态
  icon: $vm.$ListIcon.search,
  delShow: false, // 批量删除显隐
  checkBoxWidth: "0",
});
/** 如果list中有需要格式化或操作的字段,则进行定制化操作 */
const getDatas = (e, total, source) => {
  loadShow.value = false;
  $data.list = [...e];
  $data.list.forEach((item) => {
    item._delCheck = false;
  });
  $emit("total", total);
};
/** 获取列表组件数据加载状态 */
const loadStatus = (e) => {
  $data.listLoad = e;
};
/** 连接列表通用子组件模版 */
const loadDatas = async (
  loadType = $vm.$ListLoadEnum.load,
  search,
  debounce = false,
  time = 1000
) => {
  loadShow.value = true;
  await temp.value.loadDatas({
    loadType,
    search,
    debounce,
    time,
    api: requestApi,
  });
};
/**
 * @description 返回item对象,组件类型key
 */
const details = (e) => {
  $emit("clickItem", e);
};
const edit = (e) => {
  jumpPage({
    to: "/package-my/pages/addressManage/edit",
    query: {
      id: e.userAddressId,
    },
  });
};
const onCancelDel = () => {
  $data.delShow = false;
  $data.list.map((m) => (m._delCheck = false));
};
watch(
  () => $data.delShow,
  (n, o) => {
    if (n) {
      $data.checkBoxWidth = `80rpx`;
    } else {
      $data.checkBoxWidth = `0`;
    }
    $emit("checkShow", n);
  }
);
watch(
  () => $data.list,
  (n, o) => {
    const list = n.filter((f) => f._delCheck);
    $emit("checkItem", list);
  },
  {
    deep: true,
  }
);
defineExpose({
  loadDatas,
  onCancelDel,
});
</script>

<style lang="scss" scoped>
.list-item {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
  .check {
    width: v-bind("$data.checkBoxWidth");
    height: v-bind("$data.checkBoxWidth");
    display: flex;
    justify-content: center;
    align-items: center;
    &_box {
      width: 50%;
      height: 50%;
      border: 1px solid #cccccc;
      position: relative;
      border-radius: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      &--check {
        width: 70%;
        height: 70%;
        border-radius: 100%;
        background-color: #e61111;
      }
    }
  }
  .address_card {
    display: flex;
    flex: 1;
    justify-content: space-between;
    align-items: center;
    padding: 40rpx;

    .content {
      width: calc(100% - 100rpx);
      &_name {
        font-size: 34rpx;
        font-weight: 700;
      }
      &_address {
        font-size: 30rpx;
        color: #666666;
        margin-top: 10rpx;
      }
    }
    .icon {
      width: 60rpx;
      height: 60rpx;
      margin-left: 30rpx;
      image {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
